<template>
	<view class="">
		<!-- 搜索组件 -->
		<!-- <my-search :bgColor="'pink'" :radius="3"></my-search>  利用自定义属性传值并改变组件样式-->
		<my-search @search="gotoSearch"></my-search>
		<view class="scroll-view-container">
			<!-- 左侧滑动区域 -->
			<scroll-view scroll-y="true" class="left-scroll-view" :style="{height:wh+'px'}">
				<block v-for="(item, index) in cateList" :key="index">
					<view :class="['left-scroll-view-item',index===active?'active':'']" @click="activeChange(index)">
						{{item.cat_name}}
					</view>
				</block>
			</scroll-view>
			<!-- 右侧滑动区域 -->
			<scroll-view scroll-y="true" class="right-scroll-view" :style="{height:wh+'px'}" :scroll-top="scrollTop">
				<view class="cate-lv2" v-for="(item, index) in cateLevel_Two" :key="index">
					<!-- 二级分类的标题 -->
					<view class="cate-lv2-title">/ {{item.cat_name}} /</view>
					<!-- 动态渲染三级分类的列表数据 -->
					<view class="cate-lv3-list">
						<!-- 三级分类 Item 项 -->
						<view class="cate-lv3-item" v-for="item in item.children" @click="gotoGoodsList(item)"
							:key="item.cat_id">
							<!-- 图片 -->
							<image :src="item.cat_icon"></image>
							<!-- 文本 -->
							<text>{{item.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script src="./cate.js"></script>

<style lang="scss">
	@import "./cate.scss"
</style>
